<template>
    <div class="container">
        <div class="header">
            <div class="in">
                <div class="img">
                    <img :src="imgUrls + '/file/' + userInfo.avatar" alt="">
                </div>
                <div class="info">
                    <div class="info-username">
                        {{ userInfo.nickname }}
                    </div>
                    <div class="info-number">
                        绑定手机号码：{{ userInfo.phone }}
                    </div>
                </div>
            </div>
        </div>
        <div class="body">
            <div class="uname">
                <div class="uname-left">用户名</div>
                <input class="uname-right" :placeholder="userInfo.nickname" v-model="newInfo.nickname">
            </div>
            <div class="id">
                <div class="id-left">用户ID</div>
                <input class="id-right" :placeholder="userInfo.uid + '(不可修改)'">
            </div>
            <div class="phone">
                <div class="phone-left">手机号</div>
                <input class="phone-right" :placeholder="userInfo.phone" v-model="newInfo.phone">
            </div>
            <div class="passwd">
                密码
                <div class="edit">
                    <van-button type="danger" @click="editPasswd()" size="small">点击修改密码</van-button>
                </div>

            </div>
        </div>
        <div class="save">
            <van-button type="danger" size="large" round block @click="saveInfo()">保存</van-button>
        </div>

    </div>
</template>

<script>
import { userEdit, getUserInfo } from '../../api/login';
export default {
    data() {
        return {
            userEdit: {},
            imgUrls: this.$baseApi,
            userInfo: {},
            newInfo: {
                nickname: '',
                phone: "",
                avatar: "default_avatar.png",
                address:"string"
            }
        }
    },
    methods: {
        getUserInfo() {
            getUserInfo().then(res => {
                this.userInfo = res.data
            })
        },
        saveInfo() {
            userEdit(this.newInfo).then(res => {
                if (res.status === 200) {
                    this.$toast('修改成功')
                    location.reload()
                } else {
                    this.$toast('修改失败')
                }
            })
        },
        editPasswd() {
            this.$router.push('/editPasswd')
        }
    },
    mounted() {
        this.getUserInfo()
    }
}
</script>

<style lang="scss">
* {
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    height: 100%;
    background: #fff;
}

.header {
    width: auto;
    height: 90px;
    background: #fff;
    align-items: center;
    padding: 0 10px;

    .in {
        display: flex;
        align-items: center;
        -webkit-box-align: center;
        width: 277px;
        height: 59px;

        .img {
            float: left;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-top: 20px;

            img {
                margin-left: 15px;
                width: 50px;
                height: 50px;
                border-radius: 50%;
            }
        }

        .info {
            width: auto;
            height: auto;
            margin-left: 10%;
            margin-top: 7%;

            .info-username {
                font-size: 20px;
                color: #333;
            }

            .info-number {
                margin-top: 5px;
                font-size: 15px;
                color: #999;
            }
        }
    }
}

.body {
    width: 100%;
    height: auto;
    background: #fff;
    margin-top: 10px;

    .uname {
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
        -webkit-box-align: center;
        padding: 0 10px;

        .uname-left {
            width: 100px;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            color: #333;
        }

        .uname-right {
            width: auto;
            height: auto;
            border: none;
            font-size: 16px;
            color: #999;
        }
    }

    .id {
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
        -webkit-box-align: center;
        padding: 0 10px;

        .id-left {
            width: 100px;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            color: #333;
        }

        .id-right {
            width: auto;
            height: auto;
            border: none;
            font-size: 16px;
            color: #999;
        }
    }

    .phone {
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
        -webkit-box-align: center;
        padding: 0 10px;

        .phone-left {
            width: 100px;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            color: #333;
        }

        .phone-right {
            width: auto;
            height: auto;
            border: none;
            font-size: 16px;
            color: #999;
        }
    }

    .passwd {
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
        -webkit-box-align: center;
        font-size: 20px;
        padding: 0 10px;

        .edit {
            margin-left: 55%;
        }
    }
}
.save{
    width: auto;
    height: 50px;
    margin-top: 20px;
    padding: 0 10px;
}
</style>